<script lang="ts">
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import type { NodeInfo } from '$lib/api/proto/roadmap_data_api';
	import { CertificateData } from '$lib/api/proto/roadmap_data_type_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../store.svelte';
	import EditorJS from '@editorjs/editorjs';

	interface Props {
		node?: NodeInfo;
	}

	const props: Props = $props();

	let certificateName = $state(null as string | null);
	let descEditor: EditorJS | null = $state(null);
	let acquireEditor: EditorJS | null = $state(null);

	// svelte-ignore non_reactive_update
	let oldHowtoAcquire = undefined as string | undefined;
	// svelte-ignore non_reactive_update
	let oldCertificateDesc = undefined as string | undefined;

	if (props.node != undefined && props.node.content != undefined) {
		const nodeContent = Any.unpack(props.node.content, CertificateData);
		certificateName = nodeContent.certificateName;
		oldHowtoAcquire = nodeContent.howtoAcquire;
		oldCertificateDesc = nodeContent.certificateDesc;
	}

	function closeModal() {
		roadmapStore.targetNodeType = null;
		roadmapStore.targetDropPosition = null;
		roadmapStore.editNodeType = null;
		roadmapStore.editNode = null;
	}

	async function createNode() {
		if (
			roadmapStore.targetDropPosition == null ||
			userStore.userSession == null ||
			certificateName == null ||
			descEditor == null ||
			acquireEditor == null
		) {
			return;
		}

		const descData = await descEditor.save();
		const acquireData = await acquireEditor.save();

		const res = await callApi(
			appStore.roadmapDataApiClient.addNode({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				x: roadmapStore.targetDropPosition.x,
				y: roadmapStore.targetDropPosition.y,
				w: 300,
				h: 200,
				content: Any.pack(
					{
						certificateName: certificateName,
						howtoAcquire: JSON.stringify(acquireData),
						certificateDesc: JSON.stringify(descData)
					},
					CertificateData
				)
			}).response
		);
		roadmapStore.onUpdateNode(res.nodeId);
		appStore.addToastMessage({
			level: 'success',
			content: '创建职位节点成功',
			keepTime: 2000
		});
		closeModal();
	}

	async function updateNode() {
		if (
			props.node == null ||
			userStore.userSession == null ||
			certificateName == null ||
			descEditor == null ||
			acquireEditor == null
		) {
			return;
		}

		const descData = await descEditor.save();
		const acquireData = await acquireEditor.save();

		await callApi(
			appStore.roadmapDataApiClient.updateNodeData({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: props.node.nodeId,
				content: Any.pack(
					{
						certificateName: certificateName,
						howtoAcquire: JSON.stringify(acquireData),
						certificateDesc: JSON.stringify(descData)
					},
					CertificateData
				)
			}).response
		);
		roadmapStore.onUpdateNode(props.node.nodeId);
		appStore.addToastMessage({
			level: 'success',
			content: '修改职位节点成功',
			keepTime: 2000
		});
		closeModal();
	}
</script>

<dialog class="modal modal-open">
	<div class="modal-box w-[800px] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => closeModal()}>✕</button
		>
		<h3 class="text-lg font-bold">
			{props.node == undefined ? '创建证书节点' : '修改证书节点'}
		</h3>
		<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px]">
			<label class="label w-full">
				<span class="label w-[80px] text-right inline-block pr-[10px]">证书名称:</span>
				<input type="text" class="input w-full" bind:value={certificateName} />
			</label>
			<h4 class="text-base font-bold">证书说明</h4>
			<SimpleEditor
				sizeClass="min-h-[300px] border-2 border-base-200 max-h-[300px]"
				data={oldCertificateDesc}
				placeholder="请输入证书说明"
				onInit={(tmpEditor) => (descEditor = tmpEditor)}
			/>
			<h4 class="text-base font-bold">获取途径</h4>
			<SimpleEditor
				sizeClass="min-h-[300px] border-2 border-base-200 max-h-[300px]"
				data={oldHowtoAcquire}
				placeholder="请输入获取途径"
				onInit={(tmpEditor) => (acquireEditor = tmpEditor)}
			/>
		</div>
		<div class="modal-action">
			<button class="btn" onclick={() => closeModal()}>取消</button>
			<button
				class="btn btn-primary"
				disabled={certificateName == null || certificateName.trim() == ''}
				onclick={() => {
					if (props.node == undefined) {
						createNode();
					} else {
						updateNode();
					}
				}}>{props.node == undefined ? '创建' : '修改'}</button
			>
		</div>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => closeModal()}>close</button>
	</div>
</dialog>
